<template>
  <el-card>
    <div slot="header">
      <span>用户设置</span>
    </div>
    <el-row type="flex" justify="center">
      <el-col :lg="12" :md="12" :sm="24">
        <v-form
          ref="form"
          :form-title="formTitle"
          :form-data="formData"
          :rules="rules"
        >

          <template slot="uploadImg" slot-scope="scope">
            <el-form-item label="头像">
              <el-upload
                :show-file-list="false"
                :auto-upload="false"
                :on-change="myUpload"
                :on-success="handleAvatarSuccess"
                class="avatar-uploader"
                action="action">
                <img v-if="formData.avatar" :src="formData.avatar" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"/>
              </el-upload>
            </el-form-item>
          </template>
        </v-form>
      </el-col>
    </el-row>

    <el-row type="flex" justify="center">
      <el-col :lg="12" :md="12" :sm="24">
        <el-button type="warning" size="mini" class="fl" @click="reset">撤销</el-button>
        <el-button type="primary" size="mini" class="fr" @click="submit">确认</el-button>
      </el-col>
    </el-row>
  </el-card>
</template>

<script>
export default {
  name: 'Setting',
  data() {
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'))
      } else {
        if (this.formData.password !== '') {
          this.$refs.form.$refs.form.validateField('check_password')
        }
        callback()
      }
    }
    var validatePass2 = (rule, value, callback) => {
      console.log(this)
      if (value === '') {
        callback(new Error('请再次输入密码'))
      } else if (value !== this.formData.password) {
        callback(new Error('两次输入密码不一致!'))
      } else {
        callback()
      }
    }
    return {
      formTitle: [
        {
          cn: '用户名',
          en: 'username'
        },
        {
          cn: '名称',
          en: 'nickname'
        },
        {
          cn: '头像',
          en: 'avatar',
          type: 'uploadImg'
        },
        {
          cn: '密码',
          en: 'password',
          type: 'password'
        },
        {
          cn: '确认密码',
          en: 'check_password',
          type: 'password'
        }
      ],
      formData: {},
      rules: {
        password: [
          { validator: validatePass, trigger: 'blur' }
        ],
        check_password: [
          { validator: validatePass2, trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    reset() {

    },
    submit() {

    },

    // 上传图片
    myUpload(e) {
      this.formData.avatar = e.url
    },
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw)
    }
  }
}
</script>

<style scoped>

</style>
